<html class="desktop landscape">
<head>
	<title>我的预约</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link href="/static/api/yuyue/css/am_min.css" rel="stylesheet" type="text/css">
	<link href="/static/api/yuyue/css/page_min.css" rel="stylesheet" type="text/css">
	<link href="/static/api/yuyue/css/black.css" rel="stylesheet" type="text/css">
</head>
<body class="theme1">
<div class="am-widthLimite am-touchable" id="box">
	<div class="am-app" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
		<div class="am-page page_myReservation am-touchable" id="page_myReservation" style="display: block; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
			<div class="am-body-wrap am-touchable" style="top: 0px; bottom: 0px;">
				<div class="am-body-inner" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">
					<div class="reseration_list1">
						<ul>
							<template v-for="(item,index) in yuyuelist">
							<li>
								<div class="date">
									<span>预约日期：${item.yyear}.${item.ymonth}.${item.ydate}&nbsp;&nbsp;${item.xingqi}</span>
								</div>
								<div class="box">
									<div class="time">
										<div class="timeBox">
											<div class="timeText">${item.yhour}:${item.yminutes}-${item.end_hours}:${item.end_minutes}</div>
										</div>
									</div>
									<div class="img am-clickable">
										<img style="background-color: rgb(204, 204, 204);" :src="item.headurl">
									</div>
									<div class="content">
										<div class="label">预约服务者</div>
										<div class="barber">${item.aname}</div>
										<div class="label">预约项目</div>
										<div class="title">${item.sname}</div>
										<div class="label">预约门店</div>
										<div class="address">
											<span>${item.dname}</span>
										</div>
									</div>
									<div class="cancel am-clickable" style="display:block;" v-on:click="cancel_yuyue(item.id)">取消预约</div>
								</div>
							</li>
							</template>
						</ul>
					</div>
					<div class="panel_container reseration_list">
						<dl></dl>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" name="sMobile" id="sMobile" value="{{sMobile}}">
	<input type="hidden" name="sName" id="sName" value="{{sName}}">
</div>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="http://commfile.oss-cn-shanghai.aliyuncs.com/js/layer.js"></script>
</body>
</html>
<script type="text/javascript">
var vm;
vm = new Vue({
	el: '#box',
	data: {
		yuyuelist: '',
	},
	methods: {
		getyulist: function() {
			var sMobile = document.getElementById('sMobile').value;
			var sName = document.getElementById('sName').value;

			layer.open({
				type: 2,
				content: '加载中',
				shade: 'background-color: rgba(0,0,0,0.3)',
				shadeClose: false,
			});

			setTimeout(function() {
				$.ajax({
					type: 'post',
					data: {
						"sMobile": sMobile,
						"sName": sName,
					},
					url: "/wxfen/wxfen/getyulist",
					success: function(ret) {
						if(100 == ret.code) {
							var yuyuelist = [];
							for(var i=0;i<ret.data.length;i++) {
								var yyear = (new Date(ret.data[i].yuyue_time*1000)).getFullYear();
								var ymonth = parseInt((new Date(ret.data[i].yuyue_time*1000)).getMonth()) + 1;
								var ydate = (new Date(ret.data[i].yuyue_time*1000)).getDate();
								var myday = (new Date(ret.data[i].yuyue_time*1000)).getDay();
								var yhour = ('00' + (new Date(ret.data[i].yuyue_time*1000)).getHours()).substr(-2,2);
								var yminutes = ('00' + (new Date(ret.data[i].yuyue_time*1000)).getMinutes()).substr(-2,2);
								var end_timestamp = (parseInt(ret.data[i].yuyue_time) + 1800)*1000;
								var end_hours = ('00'+ (new Date(end_timestamp)).getHours()).substr(-2,2);
								var end_minutes = ('00' + (new Date(end_timestamp)).getMinutes()).substr(-2,2);

								switch(myday) {
									case 0:
										var xingqi = '周日';
									break;
									case 1:
										var xingqi = '周一';
									break;
									case 2:
										var xingqi = '周二';
									break;
									case 3:
										var xingqi = '周三';
									break;
									case 4:
										var xingqi = '周四';
									break;
									case 5:
										var xingqi = '周五';
									break;
									case 6:
										var xingqi = '周六';
									break;
								}

								yuyuelist.push({
									"id" : ret.data[i].id,
									"yyear" : yyear,
									"ymonth" : ymonth,
									"ydate" : ydate,
									"aname" : ret.data[i].aname,
									"sname" : ret.data[i].sname,
									"dname" : ret.data[i].dname,
									"yhour" : yhour,
									"yminutes" : yminutes,
									"end_hours" : end_hours,
									"end_minutes" : end_minutes,
									"xingqi" : xingqi,
									"headurl" : ret.data[i].headurl,
								});
							}

							vm.yuyuelist = yuyuelist;

							//关闭loading层
							layer.closeAll();
						} else {
							//关闭loading层
							layer.closeAll();
							alert(ret.msg);
						}
					},
					error: function(err) {
						//关闭loading层
						layer.closeAll();
						alert(JSON.stringify(err));
					},
				});
			},500);
		},
		cancel_yuyue: function(yid) {
			var r=confirm("确定取消订单吗？")
			if(r==true) {
				layer.open({
					type: 2,
					content: '加载中',
					shade: 'background-color: rgba(0,0,0,0.3)',
					shadeClose: false,
				});

				setTimeout(function() {
					$.ajax({
						type: "post",
						data: {
							yid: yid,
						},
						url: "/wxfen/wxfen/cancelyuyue",
						success: function(ret) {
							//关闭loading层
							layer.closeAll();

							alert(ret.msg);
							vm.getyulist();
						},
						error:function(err) {
							//关闭loading层
							layer.closeAll();

							alert(JSON.stringify(err));
						}
					});
				},500);
			}
		},
	},
	mounted: function() {
		this.getyulist();
	},
	delimiters:['${', '}'],
});
</script>